<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container,
        .col-md-4,
        .col-xs-12,
        .col,
        .card {
            padding: 10px
        }

        textarea {
            width: 100%;
            height: 36vh;
            font-family: Courier, monospace
        }

        #runJS {
            float: right;
            margin-top: -32px;
            z-index: 999
        }
    </style>
</head>

<body>
    <style id="css"></style>
    <div id="writeEditoe" class="container">
        <div class="row">
            <div class="col-md-4 col-xs-12">
                <textarea id="htmlArea" class="form-control" placeholder="html"></textarea>
            </div>
            <div class="col-md-4 col-xs-12">
                <textarea id="cssArea" class="form-control" placeholder="css"></textarea>
            </div>
            <div class="col-md-4 col-xs-12">
                <textarea id="jsArea" class="form-control" placeholder="js"></textarea>
                <button id="runJS" class="btn btn-sm btn-primary">运行js</button>
            </div>
        </div>
    </div>
    <div id="showEditor" class="container">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div id="html">这里是显示效果</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function () {
            window.onload = function () {
                addDomListener($('#htmlArea'), true)
                addDomListener($('#cssArea'), true)
                addDomListener($('#jsArea'), false)
                $('#runJS').addEventListener('click', function () {
                    let scriptStr = $("#jsArea").value
                    delScript()
                    addScript(scriptStr)
                })
            }

            function $(dom) {
                return document.querySelector(dom)
            }

            function addScript(value) {
                var para = document.createElement("script");
                var node = document.createTextNode(value);
                para.appendChild(node);
                para.id = "js"
                $('body').appendChild(para);
            }

            function delScript() {
                if ($('#js')) {
                    $('body').removeChild($("#js"))
                }
            }

            function addDomListener(dom, needListenInput) {
                if (needListenInput) {
                    dom.addEventListener('input', function (e) {
                        innerValue()
                    })
                }
                dom.addEventListener('keydown', function (e) {
                    if (e.keyCode === 9) {
                        var val = this.value,
                            start = this.selectionStart,
                            end = this.selectionEnd;
                        this.value = val.substring(0, start) + ' ' + val.substring(end);
                        this.selectionStart = this.selectionEnd = start + 1;
                        e.preventDefault()
                    }
                })
            }

            function innerValue(dom) {
                $('#html').innerHTML = $("#htmlArea").value
                $('#css').innerText = $("#cssArea").value
            }
        })()
    </script>
</body>

</html>
